<template>
  <div>
    <Row>
        <i-col span='20'>
            <div><span class="company-name">{{proMsg.productName}}</span><span class="bank-desc">{{proMsg.productName}}</span></div>
            <p class="desc-msg marginT10">{{proMsg.productName}}...</p>
        </i-col>
        <i-col span='2' offset='1'>
            <span @click="onCollect" v-if="collect"><img :src="collectImg" alt="" style="vertical-align:top;"><span style="display:inline-block;font-size:17px;color:#00A573;margin-top:5px">{{collectText}}</span></span>
        </i-col> 
    </Row>
    <div class="pro-list-content marginT20">
        <Row>
            <i-col span='4' offset='1'>
                <span><em>{{proMsg.loanAmount}}</em>万</span>
            </i-col>
            <i-col span='4' offset='2'>
                <span class="interest-rate">{{proMsg.loanPeriodDown}}%~{{proMsg.loanPeriodUp}}%</span>
            </i-col> 
            <i-col span='4' offset='2'>
                <span>最高<em>{{proMsg.loanPeriodDown}}</em>年</span>
            </i-col> 
            <i-col span='4' offset='2' style="margin-top:8px">
                <i-button @click="btnClick" v-if="button" type="success">{{text}}</i-button>
                <span v-else>{{text}}</span>
            </i-col> 
        </Row>
        <Row>
            <i-col span='4' offset='1'>
                <span>最高贷款额度</span>
            </i-col>
            <i-col span='4' offset='2'>
                <span>贷款利率</span>
            </i-col> 
            <i-col span='4' offset='2'>
                <span>贷款期限</span>
            </i-col> 
        </Row>
    </div>
    </div>
</template>

<script>
import collectImg from '@/assets/images/collect.png'
export default {
    props:{
        button:{
            type:Boolean,
            default:false
        },
        collect:{
            type:Boolean,
            default:false
        },
        text:{
            type:String,
            default:'立即前往'
        },
        collectText:{
            type:String,
            default:''
        },
        proMsg:{
            type:Object,
        }
    },
    data(){
        return{
            collectImg:collectImg
        }
    },
    methods:{
        btnClick(){
            this.$emit('receiveBtn',this.proMsg.productId);
        },
        onCollect(){
            console.log(this.proMsg.productId)
            this.$emit('on-collect',this.proMsg.productId);
        }
    }
}
</script>

<style>
.pro-list-content{
    text-align: center;
}
.company-name{
    font-size: 24px;
    font-weight: 700;
}
.bank-desc{
    display: inline-block;
    padding: 1px;
    background:#ccc;
    color: #00A573;
    border-radius:5px;
    font-size: 12px;
    margin-left: 10px;
    margin-top: -5px;
}
.desc-msg{
    color: #999999;
    font-size: 15px;
}
.interest-rate{
    font-size: 27px;
    font-weight: 700;
    color: #FF604F;
}
em{
    font-size: 27px;
    font-weight: 700;
}
.button-align{
    display: inline-block;
    margin-top: -5px;
}
</style>